<template>
  <div class="AddOrUpdate_main add_container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="设备维修" name="first">
        <div class="main_main">
          <el-form ref="form" :model="formData" :rules="rules" :inline="true">
            <el-form-item label="维修单号" prop="code">
              <div class="show">{{ formData.code }}</div>
            </el-form-item>
            <el-form-item label="故障类型" prop="malfunctionTypeName">
              <div class="show">{{ formData.malfunctionTypeName }}</div>
            </el-form-item>
            <el-form-item label="维修类型" prop="applyDevice">
              <div class="show">{{ formData.repairOptionName }}</div>
            </el-form-item>
            <el-form-item label="维修厂商" prop="firmName">
              <div class="show">{{ formData.firmName }}</div>
            </el-form-item>
            <el-form-item label="维修费用(元)" prop="cost">
              <div class="show">{{ formData.cost }}</div>
            </el-form-item>
            <el-form-item label="维修时长(h)" prop="duration">
              <div class="show">{{ formData.duration }}</div>
            </el-form-item>
            <el-form-item label="维修图片" prop="fileRealName" class="file">
              <FileManageFull
                :file-names.sync="formData.fileName"
                :file-real-names.sync="formData.fileRealName"
                :file-urls.sync="formData.fileUrl"
                :readonly="true"
              />
            </el-form-item>
            <el-form-item label="维修纪要" class="record-remark">
              <div class="show">{{ formData.description }}</div>
            </el-form-item>
            <el-form-item label="临时处理对策" class="record-remark">
              <div class="show">{{ formData.tempSolution }}</div>
            </el-form-item>
            <el-form-item label="长期改善对策" class="record-remark">
              <div class="show">{{ formData.longTermSolution }}</div>
            </el-form-item>
            <div ref="table_container2" class="container-repair dictDetail">
              <el-table
                ref="table"
                :data="tableData"
                stripe
                border
                style="width: 99.9%"
              >
                <el-table-column
                  prop="spareCode"
                  label="备件编码"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  prop="spareName"
                  label="备件名称"
                />
                <el-table-column
                  prop="spareModel"
                  label="规格型号"
                />
                <el-table-column
                  prop="numberUnitLabel"
                  label="备件单位"
                />
                <el-table-column
                  prop="deviceSpareWarehouseName"
                  label="仓库"
                />
                <el-table-column
                  prop="batch"
                  label="批号"
                />
                <el-table-column
                  prop="inventoryNumber"
                  label="库存数量"
                />
                <el-table-column
                  prop="number"
                  label="使用数量"
                />
              </el-table>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="设备信息" name="second" :data="formatDate1">
        <div class="main_main">
          <el-form ref="form2" :model="formatDate1" :rules="rules" :inline="true">
            <el-form-item label="设备编码" prop="code">
              <div class="show">{{ formatDate1.code }}</div>
            </el-form-item>
            <el-form-item label="设备名称" prop="name">
              <div class="show">{{ formatDate1.name }}</div>
            </el-form-item>
            <el-form-item label="设备类型" prop="typeName">
              <div class="show">{{ formatDate1.typeName }}</div>
            </el-form-item>
            <el-form-item label="规格型号" prop="model">
              <div class="show">{{ formatDate1.model }}</div>
            </el-form-item>
            <el-form-item label="设备厂商" prop="location">
              <div class="show">{{ formatDate1.firmName }}</div>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="报修信息" name="third" :data="formatDate2">
        <div class="main_main">
          <el-form ref="form2" :model="formatDate2" :rules="rules" :inline="true">
            <el-form-item label="报修单号" prop="code" class="repairs">
              <div class="show">{{ formatDate2.code }}</div>
            </el-form-item>
            <el-form-item label="设备名称" prop="bookName">
              <div class="show">{{ formatDate2.bookName }}</div>
            </el-form-item>
            <el-form-item label="设备状态" prop="deviceStatusLabel">
              <div class="show">{{ formatDate2.deviceStatusLabel }}</div>
            </el-form-item>
            <el-form-item label="设备故障时间" prop="planStartTime">
              <div class="show">{{ formatDate2.malfunctionTime }}</div>
            </el-form-item>
            <el-form-item label="期望修复时间" prop="planEndTime">
              <div class="show">{{ formatDate2.planEndTime }}</div>
            </el-form-item>
            <el-divider />
            <el-form-item label="故障类型" prop="typeName">
              <div class="show">{{ formatDate2.typeName }}</div>
            </el-form-item>
            <el-form-item label="紧急程度" prop="emergencyDegreeLabel">
              <div class="show">{{ formatDate2.emergencyDegreeLabel }}</div>
            </el-form-item>
            <el-form-item label="报修人员" prop="reportPersonName">
              <div class="show">{{ formatDate2.reportPersonName }}</div>
            </el-form-item>
            <el-form-item label="故障情况拍照" class="file">
              <FileManageFull
                :file-names.sync="formatDate2.docName"
                :file-real-names.sync="formatDate2.docRealName"
                :file-urls.sync="formatDate2.docUrl"
                :readonly="true"
              />
            </el-form-item>
            <el-form-item label="附件" class="file">
              <FileManageFull
                :file-names.sync="formatDate2.fileName"
                :file-real-names.sync="formatDate2.fileRealName"
                :file-urls.sync="formatDate2.fileUrl"
                :readonly="true"
              />
            </el-form-item>
            <el-form-item label="故障现象" prop="phenomenon">
              <div class="show">{{ formatDate2.phenomenon }}</div>
            </el-form-item>
            <el-divider />
            <el-form-item label="维修人员" prop="repairPersonName">
              <div class="show">{{ formatDate2.repairPersonName }}</div>
            </el-form-item>
            <el-form-item label="计划修复时间范围" prop="planEndTime" class="time_range">
              <div class="show">{{ formatDate2.planTime }}</div>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { addOrUpdate, getInfo, getTypelist, getManagelist } from '@/api/equipmentManage/equipmentRepair/repairRecord'
import addRecord from './addReplacement'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {}
  },
  data() {
    return {
      formData: {
        id: undefined,
        code: undefined,
        name: undefined,
        roleIdsArray: undefined,
        roleIds: undefined,
        duration: undefined,
        repairTypeId: undefined,
        repairTypeCode: undefined,
        firmId: undefined,
        cost: undefined,
        description: undefined,
        tempSolution: undefined,
        longTermSolution: undefined,
        malfunctionTypeName: undefined,
        repairOption: undefined,
        repairOptionName: undefined,
        status: 0,
        isSubmit: '1',
        fileName: '',
        fileRealName: '',
        fileUrl: '',
        data: []
      },
      num: 1,
      isSubmit: 1,
      roleOptions: [],
      activeName: 'first',
      tableData: [],
      tableHeight2: '300',
      userOptions: [],
      userOptions2: [],
      formatDate1: [],
      formatDate2: [],
      nativeSelect: '',
      disabled: false,
      repairOption: [
        { repairOptionName: '自修', id: '0' },
        { repairOptionName: '委外', id: '1' }
      ],
      rules: {
        malfunctionTypeName: [
          { required: true, message: '故障类型不能为空', trigger: 'change' }
        ],
        code: [
          { required: true, message: '维修单号不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '维修单号不能为空', trigger: 'change' }
        ],
        typeName: [
          { required: true, message: '维修单号不能为空', trigger: 'change' }
        ],
        bookName: [
          { required: true, message: '维修单号不能为空', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    if (!this.id) { // 没有id就是新增
      Object.keys(this.defaultValue).forEach(key => { // 给右边数据赋值
        this.formData[key] = this.defaultValue[key]
      })
    } else { // 有id就是编辑
      this.getInfo()
    }
    this.getList()
  },
  methods: {
    getInfo() {
      getInfo(this.id).then(res => {
        Object.keys(res.data).forEach(key => { // 给右边数据赋值
          this.formData = res.data[0]
          this.tableData = res.data[1]
          this.formatDate1 = res.data[2]
          this.formatDate2 = res.data[3]
        })
        if (this.formData.repairOption == 0) {
          this.disabled = true
          this.formData.firmId = undefined
          this.formData.cost = undefined
        } else {
          this.disabled = false
        }
      })
    },
    getList() {
      getTypelist(this.formData).then(res => {
        this.userOptions = res.data
      })
      getManagelist(this.formData).then(res => {
        this.userOptions2 = res.data
      })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.formData.isSubmit = this.isSubmit
          this.formData.id = this.id
          this.formData.roleIds = this.formData.roleIdsArray
          this.tableData.forEach(item => {
            if (item.isOldList !== true) {
              item.batchInventoryId = item.id
              item.id = 0
            }
          })
          this.formData.data = this.tableData
          this.formData.isSubmit = 0
          this.formData.status = 2
          addOrUpdate(this.formData).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$layer.close(this.layerid) // 关闭弹框
            this.$parent.refresh() // 调用父组件的刷新方法
          })
        }
      })
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.formData.isSubmit = this.isSubmit
          this.formData.id = this.id
          this.formData.roleIds = this.formData.roleIdsArray
          this.tableData.forEach(item => {
            if (item.isOldList !== true) {
              item.batchInventoryId = item.id
              item.id = 0
            }
          })
          this.formData.data = this.tableData
          this.formData.isSubmit = 1
          this.formData.status = 3
          addOrUpdate(this.formData).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$layer.close(this.layerid) // 关闭弹框
            this.$parent.refresh() // 调用父组件的刷新方法
          })
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    },
    // 选择物料后从弹窗取出来的数据
    addPanyCallBack(data) {
      this.tableData = this.tableData.concat(data)
    },
    maintainType(value) {
      var obj = {}
      obj = this.repairOption.find(item => {
        return item.id == value
      })
      this.nativeSelect = obj.id
      if (this.nativeSelect !== '0') {
        this.formData.repairOption = '1'
        this.disabled = false
      } else {
        this.formData.repairOption = '0'
        this.disabled = true
        this.formData.firmId = undefined
        this.formData.cost = undefined
      }
    },
    addRecord() { // 打开选择备件
      this.$layer.iframe({// 弹框
        content: {
          content: addRecord, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            defaultValue: {
              parentId: 0,
              parentName: '根目录'
            }
          }// props
        },
        area: ['880px', '680px'],
        title: '选择备件信息', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    removeRow(row) { // 删除行
      this.tableData.splice(this.tableData.indexOf(row), 1)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-tabs{
  flex: 1;
  overflow-y: auto;
}
/deep/ .el-tabs__header{
  margin-bottom: 0px;
}

/deep/ .el-form-item__label{
  width: 140px !important;
}
/deep/ .el-form-item__content{
  width: 240px !important;
}
.remark,.file{
  /deep/ .el-form-item__content{
    width: 660px !important;
  }
}
/deep/ .el-table .el-input__inner{
  text-align: left;
}
.time_range{
  /deep/ .el-form-item__content{
    width: 400px !important;
  }
}
.record-remark{
  width: 600px;
}
</style>
